<!--
 * @Description: 通用表格组件
 * @Version: 1.0.0
 * @Author: fujingwen
 * @Date: 2022-08-18 10:50:44
 * @FilePath: /RuoYi-Cloud-Vue3/src/components/Table/TableDynamic.vue
-->
<template>
  <el-table
    :data="list"
    ref="multipleTable"
    highlight-current-row
    @row-click="clickTable"
    @selection-change="handleSelectionChange"
    @select-all="handleSelectAll"
    @cell-click="handleCellClick"
    @cell-dblclick="handleCellDblclick"
  >
    <el-table-column
      v-if="isShowSelection"
      type="selection"
      :selectable="isSelectedFn"
      :reserve-selection="reserveSelection"
      :width="selectWidth"
      align="center"
    ></el-table-column>
    <el-table-column align="center" label="序号" width="80" v-if="showNum">
      <template slot-scope="scope">
        <span :style="getSpecialStyle(scope.row)">{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
      </template>
    </el-table-column>
    <el-table-column v-for="item in cols" :key="item.key" align="center" :prop="item.key" :label="item.label" :width="item.width ? item.width : 'auto'">
      <template #default="scope">
        <div v-if="item.format">
          <div class="d-flex" v-html="item.format(scope.row, scope.column)"></div>
        </div>
        <div v-else>
          <div>{{ scope.row[item.key] || '——' }}</div>
        </div>
      </template>
    </el-table-column>
    <slot name="ctrl"></slot>
  </el-table>
</template>

<script setup>
const props = defineProps({
  showNum: {
    type: Boolean,
    default: false
  },
  isShowSelection: {
    type: Boolean,
    default: false
  },
  isSelectedFn: {
    type: Function,
    default() {
      return () => {
        console.log('function')
      }
    },
    required: false
  },
  reserveSelection: {
    type: Boolean,
    default: false
  },
  selectWidth: {
    type: Number,
    default: 80
  },
  list: {
    type: Array,
    default: () => [],
    required: false
  },
  cols: {
    type: Array,
    default: () => [],
    required: false
  },
  pageNum: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  getSpecialStyle: {
    type: Function,
    default() {
      return () => {
        console.log('function')
      }
    },
    required: false
  }
})

// const cols = ref([])
// const list = ref([])

// onMounted(() => {
//   cols.value = props.cols
//   list.value = props.list

//   console.log(props.list)
// })

const emit = defineEmits()
// 点击table的某一行
const clickTable = (row) => {
  emit('clickTableRow', row)
}
// 多选时，选中某一项或者反选时触发
const handleSelectionChange = (val) => {
  emit('handleSelectionChange', val)
}
// 多选时，选中全部或者反选时触发
const handleSelectAll = (val) => {
  emit('handleSelectAll', val)
}
const handleCellClick = (row) => {
  emit('handleCellClick', row)
}
const handleCellDblclick = (row) => {
  emit('handleCellDblclick', row)
}
</script>

<style scoped></style>
